<template>
	<div class="CustomSelect">
        <el-popover ref="CustomSelectpopover" trigger="click" placement="bottom-end"  popper-class="CustomSelectpopover">
            <template #default>
                <ul  class="CustomSelectContextmenu" id="contextmenu">
						<li v-for="item in options" :key="item.value" @click="selected(item)">{{item.label}}</li>
					</ul>
            </template>
            <template #reference>
                <div class="CustomSelectItem">
                    <span class="CustomSelectText">{{key}}</span>
                    <div class="CustomSelectMore"></div>
                </div>
			</template>
		</el-popover>
    </div>
</template>
<script>
export default {
	name: "exCustomSelect",
	components: {},
	props: {
		currkey: {type: Number, default: 1900},
	},
	data() {
		return {
            options:[],
            key:""
		};
	},
    beforeMount() {
        this.key=this.currkey;
        const currentDate = new Date();
			let zczztjxl = currentDate.getFullYear();
			for(let i = 0 ; i <= 10 ; i++){
				this.options.push({
					label: zczztjxl - i,
					value: zczztjxl - i
				})
			}
    },
	methods: {
        selected(item){
            //console.log(item);
            this.key=item.value;
            this.$emit('selectchange',  item.value);
            this.$refs.CustomSelectpopover.hide();
        }
    }
}
</script>
<style scoped>
.CustomSelect {

  border-radius: 4px;
  width: 66px;
  height: 24px;
  margin-left: 23px;
  border: 1px solid #d9d9d9;
  float: right;
  margin-top: 5px;
}
.CustomSelectItem {
  width: 50px;
  height: 10px;
  margin: 4px 0 0 11px;
  cursor: pointer;
}
.CustomSelectText{
    width: 28px;
  height: 10px;
  overflow-wrap: break-word;
  color: rgb(0, 0, 0);
  font-size: 12px;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  float: left;
}
.CustomSelectMore{
    width: 10px;
  height: 6px;
  background: url(../../../public/img/sytagdown.png)
    100% no-repeat;
  background-size: 100% 100%;
  margin-top: 3px;
  float: left;
  margin-left: 6px;
}

.CustomSelectContextmenu {
		width: 60px;
		margin:0;
		border-radius: 0px;
		background: var(--el-bg-color-overlay);
		border: 0px solid var(--el-border-color-light);
		z-index: 3000;
		list-style-type: none;
		padding: 0px 0;
		padding-top: 10px;
	}


    .CustomSelectContextmenu li{
        width: 60px;
        padding-left: 10px;
        cursor: pointer;
        overflow-wrap: break-word;
  font-size: 12px;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
    }
    .CustomSelectContextmenu li:hover{
        background-color: #427CFF !important;
		color: #fff !important;
    }

/**el-popper__arrow */
</style>
